<template>
    <view>
        <view class="lz-status_bar">
            <view class="lz-top_view"></view>
        </view>
        <view class="login">
			<view class="login-top">
				<image src="../../static/img/logo.png" mode=""></image>
				<view>智能巡检系统</view>
			</view>
            <view class="login-content">
                <view class="login-row">
                    <view class="login-flex">
                        <view class="iconfont icon-person"></view>
                        <m-input type="text" v-model='account' placeholder="请输入账号"></m-input>
                    </view>
                    <a href=""></a>
                </view>
                <view class="login-row" style="border-bottom:none">
                    <view class="iconfont icon-suo"></view>
                    <m-input type="password" displayable v-model="password" placeholder="请输入密码" style="flex: 1;"></m-input>
                </view>
                <view class="login-button">
                    <button @tap="login()" type="primary" class="primary">登录</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {mapState} from 'vuex'
    import mInput from '@/components/m-input.vue';

    export default {
        data() {
            return {
                account: '',
                password: '',
                id: 0,
            }
        },
        computed: {
            ...mapState(['userInfo', 'loginInfo']),
        },
        components: {
            mInput
        },
		onShow(){
			if(this.userInfo.token != undefined){
				uni.reLaunch({
					url:'/pages/shouye/index'
				})
			}
		},
        onLoad(opts) {
            if (opts.id != undefined) {
                this.id = opts.id
            }
            if (this.loginInfo.account != undefined) {
                this.account = this.loginInfo.account
                this.password = this.loginInfo.password
            }
        },
        methods: {
            async login() {
                let that = this
                let res = await this.$lib.$http.post({
                    url: this.$lib.$urlMap.login,
                    data: {
                        account: this.account,
                        password: this.password
                    },
                    needLogin: false
                })
                if (res.code == 1) {
                    let info = res.data.userinfo,
                        loginInfo = {
                            account: this.account,
                            password: this.password
                        };
                    this.$lib.$store.commit('setUserInfo', res.data.userinfo)
                    this.$lib.$store.commit('setLoginStatus', 1)
                    uni.showToast({
                        title: '登录成功',
                        icon: 'success',
                        duration: 1500
                    })
					this.$lib.runTimer();
                    setTimeout(function () {
                        uni.reLaunch({
                            url: '/pages/shouye/index'
                        })
                    }, 1500)
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none',
                        duration: 1500
                    })
                }
            },
        }
    }
</script>

<style>
    .login {
        width: 86%;
        margin: 0 auto;
    }

    .login-button {
        padding-top: 8px;
    }

    .login-button .primary {
        background: #4d72ff !important;
        box-shadow: 0 2px 11px rgb(0 56 216 / 15%);
        color: #fff !important;
        border-radius: 30px;
        font-size: 17px;
        padding: 2px;
    }

    .login-title {
		color: #5d5d5d;
		font-size: 16px;
		padding: 18px 0 0;
		text-align: center;
		letter-spacing: 2px;
	}

    .login-row {
        display: flex;
        align-items: center;
        border-bottom: solid 1px #f3f3f3;
    }

    .login-flex {
        display: flex;
        align-items: center;
        flex: 1;
    }

    .login-row .iconfont {
        font-size: 19px;
        color: #6d6d6d;
    }
	.login-top{
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
		margin-top: 20%;
		margin-bottom: 18px;
	}
	.login-top image{
	    width: 85px;
	    height: 85px;
		margin-bottom: 4px;
	}
	.login-top view{
	    font-weight: bold;
	    color: #3b79dc;
	    font-size: 23px;
	}
</style>